<template>
	<view class="user">
		<view class="top">
			<button @click="clickClearHistories" v-if="historyData.length != 0" type="default" size="mini">清空历史记录</button>
			<view v-if="historyData.length == 0" class="none">
				<image src="../../static/images/history.png" mode=""></image>
				<view class="text">
					浏览历史
				</view>
			</view>
			<view v-if="historyData.length != 0" class="box">
				<view class="row" v-for="item in historyData" :key="item.id">
					<newsbox @click.native="goDetail(item.cid,item.id)" :item="item">
					</newsbox>
				</view>
				<view class="text">
					------------------浏览历史------------------
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content-msg" v-show="data.length!=0">
				<view class="content-title">
					新闻推荐
				</view>
				<view class="row" v-for="item in data" :key="item.id">
					<newsbox @click.native="goDetail(cid,item.id)" :item="item">
					</newsbox>
				</view>
			</view>
			<view class="nocontent" v-show="data.length==0">
				<image class="image" src="../../static/images/nohis.png" mode="widthFix">
				</image>
				<view class="text">
				    相关栏目暂无其他新闻！
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { request } from "../.././utils/request.js"

	export default {
		data() {
			return {
				data:[],
				historyData:[],
				cid: 50
			};
		},
		onLoad(e) {
			// this.requestXWLB(this.cid)
		},
		onShow() {
			this.getHistroies()
		},
		created() {
		   // this.getHistroies()
		   // console.log(this.historyData)
		},
		methods:{
			// 清除历史记录
			clickClearHistories(){
				uni.removeStorage({
					key:"XWLB",
					success: () => {
						// console.log("success clear")
						// 如果 data 中的 this.historyData 是一个引用类型的数据（例如数组或对象），Vue 的响应式更新机制可能无法自动检测到变化。
						// 在这种情况下，你可以使用其它方式来强制触发更新，例如重新赋值一个新的空数组，或者使用 splice 方法清空数组
						// 之后再次赋值可以触发响应式更新：
						// 获取最新的数据，然后将数据赋值给 this.historyData
						this.historyData = []
					}
				})
			},
			// 跳转到详情页面
			goDetail(cid,id){
				uni.navigateTo({
					url:`/pages/detail/detail?cid=${cid}&id=${id}`
				})
			},
			// 从本地存储获取历史记录信息
			getHistroies(){
				uni.getStorage({
					key: 'XWLB',
					// 这里要使用箭头函数，不然会出现this指向问题
					success: (res) => {
						// 在小程序中，如果 res.data 为 undefined，则无法访问 histories 属性，
						// 因此在访问 histories 属性之前进行判断，确保 res.data 存在并且具有 histories 属性
						this.historyData = res.data && res.data.histories || []
						// console.log(this.historyData)
					}
				})
				uni.getStorage({
					key: 'cid',
					// 这里要使用箭头函数，不然会出现this指向问题
					complete: (res) => {
						if(res.data)
						{
							this.cid = res.data
						}
						// console.log(this.cid)
						// 需要在获取cid之后才执行requestXWLB()，因为是异步函数，不然小程序中有bug
						this.requestXWLB(this.cid)
					}
				})
			},
			// 获取新闻列表
			requestXWLB(cid){
					request({
					  url: 'https://ku.qingnian8.com/dataApi/news/newslist.php',
					  method: 'GET',
					  data: {
					      cid
					    }
					})
					  .then((res) => {
					    // console.log(res)
						this.data = res
					  })
					  .catch((err) => {
					    console.error(err)
					  })
				}
		},
		watch:{
		}
	}
</script>

<style lang="scss">
	.user{
		.top{
			padding: 50rpx 0;
			background-color: #F8F8F8;
			color: #666;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.none{
				image{
					width: 150rpx;
					height: 150rpx;
				}
				.text{
					font-size: 38rpx;
					padding-top: 20rpx;
				}
			}
		}
	}
	.box{
		padding:30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.row{
			border: 1px dotted #efefef;
			padding: 15rpx 0;
		}
		.text{
			font-size: 30rpx;
			margin-top: 60rpx;
		}
	}
	.content{
		padding:30rpx;
		.content-title{
			display: inline-block;
			font-size: 38rpx;
			border: 1px dotted #666;
			padding: 15rpx 0;
			width: 100%;
			background-color: #31C27C;
			text-align: center;
			color: white;
		}
		.row{
			border: 1px dotted #efefef;
			padding: 15rpx 0;
		}
		.text{
			font-size: 38rpx;
		}
	}
	
	.nocontent{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.image{
			width: 450rpx;
		}
		.text{
			font-size: 26rpx;
			color: #888;
		}
	}
</style>
